<template>
  <div class="grid">
    <div class="col-12">
      <!-- 头部导航栏 -->
      <el-container class="home-container animated fadeIn">
        <HeaderNavsBar style="margin-top: 10px"> </HeaderNavsBar>
        <el-main class="home-banner animated zoomIn">
          <div class="blog-title">
            <h1>标签详细</h1>
          </div>
        </el-main>
      </el-container>
    </div>
    <el-container class="animated fadeInUp">
      <el-main>
        <!-- 文章信息展示 -->
        <el-row :gutter="20">
          <el-col :span="10" :offset="7">
            <div>
              <div class="content-header header-shadow">
                <div class="content-header-left">
                  <h3 class="header-title">标签</h3>
                </div>
                <div class="content-header-right">
                  <!-- 获取总共的篇数 -->
                  共
                  <h2 class="total_number">
                    {{ tagTotal }}
                  </h2>
                  个
                </div>
              </div>
            </div>
            <div class="tag-box">
              <!-- 每个分类按钮 -->
              <div
                class="tag-btn"
                @click="findTagArticle"
                v-for="tag in tagList"
                :key="tag.tagId"
              >
                <!-- 名称 -->
                <a
                  @click="updateTagBtnStyle(tag.tagId)"
                  class="tagName"
                  :class="
                    clickTagId.indexOf(tag.tagId) !== -1 ? 'click-tag-btn' : ''
                  "
                >
                  {{ tag.tagName }}
                </a>
                <!-- 当前分类的数量 -->
                <div
                  class="tagCount"
                  :class="
                    clickTagId.indexOf(tag.tagId) !== -1 ? 'click-tag-btn' : ''
                  "
                >
                  {{ tag.tagCount }}
                </div>
              </div>
            </div>

            <!-- 文章信息展示 -->
            <ArticleCard
              class="content-main my-shadow"
              v-for="article in articleListByTag"
              :key="article.articleId"
              :parentArticle="article"
            ></ArticleCard>
            <div class="paging my-shadow">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2, 6, 10, 15]"
                :page-size="pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total_number === 0 ? articleTotal : total_number"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <!-- 底部 -->
      <el-footer>
        <IndexFooter></IndexFooter>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import HeaderNavsBar from "@/components/tools/HeaderNavsBar.vue";
import IndexFooter from "@/components/layout/IndexFooter.vue";
import BlogCommonApi from "@/api/BlogCommonApi";
import ArticleCard from "@/components/layout/ArticleCard.vue";
const blogCommonApi = new BlogCommonApi();
export default {
  components: { HeaderNavsBar, IndexFooter, ArticleCard },
  data() {
    return {
      articleListByTag: [],
      tagList: [],
      currentPage: 1, // 当前页码
      pageSize: 6, // 每页的显示数据条数
      // 文章列表头部数据信息
      total_number: 0, // 总条数
      clickTagId: [],
    };
  },
  methods: {
    // 根据所选标签查询对应文章
    findTagArticle() {
      let data = {
        tagIds: this.clickTagId.join(","),
        limit: 6,
        offset: 0,
      };
      blogCommonApi.getArticleListByTagId(data).then((res) => {
        if (res.code === 50000) {
          this.$message({
            type: "error",
            message: "当前选择的标签没有文章信息哦,已为您显示所有文章",
          });
          return;
        }
        if (res.code === 0) {
          this.articleListByTag = res.data.articleMsgVos;
          // 点击了之后将total_number 赋值 区分直接查询文章与查询标签文章
          this.total_number = res.data.tagCount;
        }
      });
    },
    // 点击的时候更新标签的样式
    updateTagBtnStyle(index) {
      this.currentPage = 1;
      if (this.clickTagId.indexOf(index) !== -1) {
        // 再次点击后进行删除
        this.clickTagId.splice(this.clickTagId.indexOf(index), 1);
      } else {
        this.clickTagId.push(index);
        this.clickTagId.sort();
      }
    },
    // 点击下一页之后进行当前标签的跳转
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      let data = {
        offset: (this.currentPage - 1) * this.pageSize,
        limit: this.pageSize,
      };
      // 如果total_number 不等于0 说明现在需要查询的是标签的分页信息
      if (this.total_number !== 0) {
        const id =
          this.$route.query.id === undefined
            ? this.clickTagId.join(",")
            : this.$route.query.id;

        data = {
          tagIds: id,
          offset: (this.currentPage - 1) * this.pageSize,
          limit: this.pageSize,
        };
        blogCommonApi.getArticleListByTagId(data).then((res) => {
          if (res.code === 0) {
            this.articleListByTag = res.data.articleMsgVos;
          }
        });
        return;
      }
      // 不是则直接获取文章信息的下一页
      blogCommonApi.getArticleList(data).then((res) => {
        this.articleListByTag = res.data;
      });
    },
  },
  mounted() {
    // 获取标签信息
    blogCommonApi.getTagList().then((res) => {
      this.tagList = res.data;
    });
  },
  created() {
    if (this.$route.query.id !== undefined) {
      const id = this.$route.query.id;
      let data = {
        tagIds: id,
        offset: 0,
        limit: 6,
      };
      this.$nextTick(() => {
        this.clickTagId.push(parseInt(this.$route.query.id));
      });
      blogCommonApi.getArticleListByTagId(data).then((res) => {
        if (res.code === 0) {
          this.$nextTick(() => {
            this.articleListByTag = res.data.articleMsgVos;
            this.total_number = res.data.tagCount;
          });
        }
        if (res.code === 50000) {
          this.$message({
            type: "error",
            message: "当前选择的标签没有文章信息哦,已为您显示所有文章",
          });
          blogCommonApi.getArticleList(data).then((res) => {
            this.articleListByTag = res.data;
          });
          return;
        }
      });
    } else {
      let data = {
        offset: 0,
        limit: 6,
      };
      blogCommonApi.getArticleList(data).then((res) => {
        this.articleListByTag = res.data;
      });
    }
  },
  computed: {
    tagTotal() {
      return this.$store.state.tagCount;
    },
    articleTotal() {
      return this.$store.state.articleCount;
    },
  },
};
</script>

<style scoped lang="scss">
.home-container {
  width: 100%;
  height: 69vh;
  background: url("https://map-zblog.oss-cn-guangzhou.aliyuncs.com/backgroundImg/psc.jpg")
    no-repeat 50% / cover fixed;
}

.tag-box {
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  padding: 28px 14px;
  border: 1px solid rgba(34, 36, 38, 0.15);
  margin-top: -1px;
  background-color: #fff;

  border-radius: 0.3125em;
  .tag-btn {
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 5px;
    margin-right: 5px;
    color: rgba(0, 0, 0, 0.6);
    .tagName {
      display: inline-block;
      padding: 6px 22px;
      border: 1px solid rgba(34, 36, 38, 0.15);
      border-radius: 4px;
      border-right: none;
      color: rgba(0, 0, 0, 0.6);
    }
    .tagName:hover {
      border: 1px solid rgba(34, 36, 38, 0.35);
      border-right: none;
      transition: all 0.3s;
    }
    .tagCount {
      display: inline-block;
      position: relative;
      font-weight: 700;
      padding: 7px 14px;
      border: 1px solid rgba(34, 36, 38, 0.15);
      font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
      color: rgba(0, 0, 0, 0.87);
      border-radius: 4px;
    }
    .tagCount::before {
      position: absolute;
      content: "";
      top: 10px;
      left: -6px;
      width: 0.6666em;
      height: 0.6666em;
      border-style: inherit;
      border-color: inherit;
      border-width: 0 0 1px 1px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      background-color: #fff;
      background-image: none;
      z-index: 2;
      -webkit-transition: background 0.1s ease;
      transition: background 0.1s ease;
    }
  }
}
.tag-box:hover {
  box-shadow: 0px 1.7px 5.3px rgba(0, 0, 0, 0.039),
    0px 5.6px 17.9px rgba(0, 0, 0, 0.055), 0px 25px 80px rgba(0, 0, 0, 0.09);
  transition: all 0.3s;
}

.click-tag-btn {
  color: #2185d0 !important;
  border-color: #2185d0 !important;
}
.paging {
  text-align: center;
  padding: 10px;
  border-radius: 0 0 0.28571429rem 0.28571429rem;
  border: 1px solid #d4d4d5;
}
</style>
